<template>
  <div class="home">
  <!-- 顶部搜索 -->
    <div class="top flex">
      <div class="table">网易严选</div>
      <div @click="search" class="ss">搜索商品,共194088款好物</div>
      <button class="btn" @click="login" size="mini">登录</button>
    </div>
    <!-- 滚动视图 -->
    <div class="scroll"> 
      <scroll-view class="list flex" scroll-x  enable-flex>
        <view class="item" v-for="(item,index) in categoryArr" :key="index">{{item.name}}</view>
      </scroll-view>
    </div>
    <!-- 下拉面板 -->
    <div class="xl flex" @click="handler">
      <image class="img" v-if="!panelVisible"  src="../../static/bottom.png" mode="widthFix"/>
      <image class="img" v-else src="../../static/top.png" mode="widthFix"/>
    </div>
    <div class="panel" :hidden="!panelVisible">
      <!-- 下拉面板的内容 -->
      <div class="title">全部频道</div>
      <div class="box">
        <div class="item" v-for="(item,index) in 10" :key="index">推荐</div>
      </div>
    </div>
    <!-- 轮播图 -->
    <swiper class="swiper" indicator-dots interval="2000" autoplay circular>
      <swiper-item v-for="(item,index) in homeInfo.focusList" :key="index">
        <image class="img" :src="item.picUrl"/>
      </swiper-item>
    </swiper>
    <!-- 三个优点 -->
    <div class="good flex">
      <div class="item flex"  v-for="(item,index) in homeInfo.policyDescList" :key="index">
        <image class="img" :src="item.icon" mode="widthFix"/>
        <div class="title">{{item.desc}}</div>
      </div>
    </div>
    <!-- 分类 -->
    <div class="category flex"> 
      <div class="item" v-for="(item,index) in homeInfo.kingKongModule?.kingKongList" :key="index">
      
        <image class="img" :src="item.picUrl" mode="widthFix"/>
        <div class="title">{{item.text}}</div>

      </div>
    </div>
    <!-- 横幅 -->
    <div class="hf">
      <img class="img" src="@/static/hf.png" mode="widthFix"/>
    </div>
    <!-- 新人专享礼 -->
    <div class="newPeole">
      <div class="header">- 新人专享礼 -</div>
      <div class="footer flex">
        <div class="left">
          <img class="img" src="../../static/新人专享礼包.png" alt="" mode="widthFix">
        </div>
        <div class="right">
            <img class="img" src="../../static/福利社.png" alt="" mode="widthFix">
            <img class="img" src="../../static/新人拼团.png" alt="" mode="widthFix">      
        </div>
      </div>
    </div>
    <!-- 类目热销榜 -->
    <div class="hot">
      <div class="title">类目热销榜</div>
      <div class="contanier flex">
        <dic class="item flex_c" :class="index<2?'active':''" v-for="(item,index) in homeInfo.categoryHotSellModule?.categoryList" :key="index">
          <div class="title">{{item.categoryName}}</div>
          <image class="img" :src="item.picUrl" mode="widthFix"/>
        </dic>
      </div>
    </div>
    <!-- 为你精选 -->
    <div class="jx">
      <div class="title">为你精选</div>
      <v-card></v-card>
    </div>
    <!-- 回到顶部 -->
    <v-top v-if="show"></v-top>
  </div>
</template>

<script setup lang="ts">
//引入vue相关
import {ref,onUpdated} from 'vue'
//引入uni相关
import {onLoad,onPageScroll} from '@dcloudio/uni-app'
//引入api请求
import {reqHomeInfo,reqCategoryInfo} from '@/api/index'


//定义响应式数据
//搜索的值
let conent = ref<any>('')
//首页数据
let homeInfo = ref<any>({})
//显示与隐藏回到顶部
let show = ref<any>(true)
//控制显示与隐藏频道面板
let panelVisible = ref<any>(false)
//分类列表数据
let categoryArr = ref<any>({})


//定义方法
//获取首页数据
const getHomeInfo = async ()=>{
  let result = await reqHomeInfo() 
  console.log(result.data);
  if(result.code==200){
    homeInfo.value = result.data.data
  }
}
//搜索的回调
const search = ()=>{
  uni.navigateTo({
    url: '/pages/search/search'
  })
}
//下拉面板的点击事件
const handler = ()=>{
  panelVisible.value = !panelVisible.value
}
//获取分类详情
const getCategoryInfo = async ()=>{
  let result = await reqCategoryInfo(11)
  console.log(result.data);
  Object.assign(categoryArr.value,result.data.categoryL1List)
  console.log(categoryArr.value);
  
}
//登录按钮的回调
const login = ()=>{
  uni.switchTab({ 
    url: '/pages/person/person' 
  })
}



//生命周期钩子
//页面挂载
onLoad((options)=>{
  //获取首页数据
  getHomeInfo()
  //获取分类详情
  getCategoryInfo()
})
//页面滚动
onPageScroll((e)=>{
  if(e.scrollTop > 300){
    show.value = true
  }else{
    show.value = false
  }
})



</script>

<style scoped lang="less">
.home{
  width: 100%;
  position: relative;
  /* 顶部搜索 */
  .top{
    width: 100%;
    height: 70rpx;
    align-items: center;
    .table{
      width: 25%;
      font-size: 34rpx;
      font-weight: 900;
      text-align: center;
    }
    .ss{
      width: 55%;
      padding: 6rpx 14rpx;
      border-radius: 12rpx;
      color: #737373;
      font-size: 28rpx;
      background-color: rgb(225, 225, 225);
    }
    .btn{
      width: 80rpx;
      height: 50rpx;
      line-height: 50rpx;
      padding: 0rpx;
      font-size: 26rpx;
      color: red;
      background-color: rgb(255, 255, 255);
      border: 1px solid #ff0000;
    }
  }
  /* 滚动视图 */
  .scroll{
    height: 70rpx;
    line-height: 70rpx;
    overflow: scroll;
    .list{
      width: 3600rpx;
      .item{
        margin: 0 20rpx;
        // border:1px solid #ccc;
      }
    }
  }
  /* 下拉面板 */
  .xl{
    align-items: center;
    justify-content: center;
    width: 80rpx;
    position: absolute;
    background-color: white;
    height: 80rpx;
    line-height: 80rpx;
    top: 60rpx;
    right: 0rpx;
    .img{
      width: 50rpx; 
    }
  }
  /* 面板 */
  // .panel{
  //   position: fixed;
  //   top: 60rpx;
  //   right: 0rpx;
  // }
  /* 轮播图 */
  .swiper{
    width: 100%;
    .img{
      width: 100%;
    }
  }
  /* 三个优点 */
  .good{
    width: 100%;
    height: 40rpx;
    margin-top: 20rpx;
    justify-content: space-evenly;
    .item{
      width: 30%;
      .img{
        width: 32rpx;
        margin-right: 8rpx;
      }
      .title{
        font-size: 24rpx;
      }
    }
  }
  /* 分类 */
  .category{
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    flex-wrap: wrap;
    .item{
      width: 20%;
      text-align: center;
      margin-bottom: 20rpx;
      .img{
        width: 110rpx;
      }
      .title{
        font-size: 24rpx;
      }
    }
  }
  /* 横幅 */
  .hf{
    width: 100%;
    padding: 0 40rpx;
    box-sizing: border-box;
    .img{
      width: 100%;
    }
  }
  /* 新人专享礼 */
  .newPeole{
    width: 100%;
    padding: 0 40rpx;
    box-sizing: border-box;
    .header{
      margin: 30rpx 0;
      text-align: center;
    }
    .footer{
      .left{
        width: 50%;
        margin-right: 6rpx;
        .img{
          width: 100%;
        }
      }
      .right{
        width: 50%;
        .img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  /* 类目热销榜 */
  .hot{
    width: 100%;
    padding: 0 40rpx;
    box-sizing: border-box;
    .title{
      margin: 20rpx 0;
    }
    .contanier{
      width: 100%;
      flex-wrap: wrap;
      .item{
        width: 23%;
        height: 200rpx;
        background-color: #f4f2f2;
        box-sizing: border-box;
        margin-top: 10rpx;
        margin-right: 10rpx;
        align-items: center;
        .img{
          width: 140rpx;
        }
        .title{
          font-size: 26rpx;
        }
      }
      //数据前二特殊类名
      .active{
        display: flex !important;
        width: 47.5%;
        height: 180rpx;
        background-color: rgb(216, 242, 250);
        box-sizing: border-box;
        margin-top: 10rpx;
        margin-right: 10rpx;
        .img{
          height: 80%;
        }
        .title{
          font-size: 24rpx;
        }
      }
    }
  }
  /* 为你精选 */
  .jx{
    width: 100%;
    padding: 0 40rpx;
    box-sizing: border-box;
    .title{
      font-size: 40rpx;
      font-weight: 900;
      margin: 20rpx 0;
    }
  }
}

</style>